<script setup lang="ts" name="visualList">
import { Row, Col, Card, CardMeta, message } from "ant-design-vue";
import { defineAsyncComponent, ref } from "vue";
import datavPng from "@/assets/datav/datav.png";
import car from "@/assets/datav/car.jpeg";
import moeny from "@/assets/datav/moeny.jpeg";
import router from "@/router";

const pageWrap = defineAsyncComponent(
  () => import("@/components/pageWrap/index.vue")
);
const handleTo = (item: any) => {
  if (item.flag) {
    // window.open("http://localhost:8081/demonstration" );
    // router.push({ path: "/demonstration", query: { id: 1 } });
    const { href } = router.resolve({
      path: "/demonstration",
      query: { id: item.path },
    });
    window.open(href, "_blank"); //打开新的窗口
  } else {
    message.error("该功能正在开发中");
  }
};
const dataVList = ref([
  {
    id: "1",
    title: "车联网数据可视化",
    description: "车联网数据可视化",
    img: datavPng,
    flag: false,
    path: "",
  },
  {
    title: "汽车循环数据看板",
    id: "2",
    description: "1、高德地图 2、echarts 3、datav技术",
    img: car,
    flag: true,
    path: "usedCar",
  },
  {
    title: "收费资金监管中心",
    id: "3",
    description: "1、高德地图 2、echarts 3、datav技术",
    img: moeny,
    flag: true,
    path: "amountReg",
  },
]);
</script>
<template>
  <pageWrap class="bg-white overflow-y-auto">
    <Row :gutter="[15, 15]">
      <Col
        :xs="12"
        :sm="12"
        :lg="8"
        :xl="6"
        class="mb-5"
        v-for="item in dataVList"
        :key="item.id"
      >
        <Card hoverable style="width: 100%" @click="handleTo(item)">
          <CardMeta :title="item.title">
            <template #description>{{ item.description }}</template>
          </CardMeta>
          <template #cover>
            <img alt="example" style="height: 180px" :src="item.img" />
          </template>
        </Card>
      </Col>
    </Row>
  </pageWrap>
</template>
<style scoped lang="less"></style>
